<template>
  <div class="problem-container">
    <!-- 标题区 -->
    <div class="header">
      <h1 class="problem-title">{{ problem.title }}</h1>
      <div class="meta-row">
        <el-tag :type="difficultyTag.type" effect="plain">
          {{ difficultyTag.text }}
        </el-tag>
        <span class="submit-count">{{ problem.submitCount }}次提交</span>
      </div>
    </div>

    <!-- 核心内容区 -->
    <div class="main-content">
      <!-- 题目描述 -->
      <el-card class="description-card">
        <pre class="problem-content">{{ problem.description }}</pre>
        
        <!-- 样例展示 -->
        <div v-if="sampleCase" class="sample-section">
          <h3 class="section-title">样例</h3>
          <div class="io-grid">
            <div class="io-cell">
              <pre class="sample-content">{{ sampleCase.input }}</pre>
            </div>
            <div class="io-cell">
              <pre class="sample-content">{{ sampleCase.output }}</pre>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 代码编辑区 -->
      <el-card class="editor-card">
        <div class="editor-header">
          <el-select 
            v-model="currentLanguage" 
            placeholder="选择语言"
            class="lang-selector"
            @change="handleLanguageChange">
            <el-option
              v-for="lang in languages"
              :key="lang.value"
              :label="lang.label"
              :value="lang.value"/>
          </el-select>
          <el-button 
            type="primary" 
            :loading="submitting"
            @click="handleSubmit"
            class="submit-btn">
            提交代码
          </el-button>
        </div>
        
        <!-- 带滚动条的编辑器容器 -->
        <div class="editor-wrapper">
          <div ref="editor" class="ace-editor-container"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 保持原有逻辑，增加sampleCase计算属性
computed: {
  sampleCase() {
    return this.problem.testCases?.[0] || null;
  }
}
</script>

<style lang="scss" scoped>
.problem-container {
  height: 100vh;
  background: #f8fafc;
  padding: 24px;

  .header {
    margin-bottom: 24px;
    
    .problem-title {
      font-size: 28px;
      color: #1a1a1a;
      margin: 0 0 8px;
    }
    
    .meta-row {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .submit-count {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .main-content {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    height: calc(100vh - 120px);
  }

  .description-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    
    .problem-content {
      font-size: 15px;
      line-height: 1.8;
      color: #333;
      white-space: pre-wrap;
      padding: 16px;
      background: #fcfcfc;
    }
    
    .sample-section {
      margin-top: 24px;
      border-top: 1px solid #eee;
      padding: 16px;
      
      .section-title {
        color: #666;
        font-size: 16px;
        margin: 0 0 12px;
      }
      
      .io-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      
      .sample-content {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 6px;
        font-family: monospace;
        max-height: 200px;
        overflow-y: auto;
        
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-thumb {
          background: #ddd;
          border-radius: 3px;
        }
      }
    }
  }

  .editor-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    
    .editor-header {
      display: flex;
      gap: 12px;
      padding: 16px;
      border-bottom: 1px solid #eee;
    }
    
    .editor-wrapper {
      height: calc(100vh - 240px);
      position: relative;
      
      .ace-editor-container {
        height: 100%;
        font-size: 14px;
        
        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background: #e0e0e0;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>